<template>
  <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
    <view class="cu-bar fixed" :style="style" :class="[bgImage !== '' ? 'none-bg text-white bg-img' : '', bgColor]">
      <view class="action" @tap="BackPage" v-if="isBack">
        <text class="cuIcon-back"></text>
        <slot name="backText"></slot>
      </view>
      <view class="content" :style="[{ top: StatusBar + 'px' }]">
        <slot name="content">
          {{ title }}
        </slot>
      </view>
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'pui-custom-nav',
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar
    };
  },
  computed: {
    style() {
      let StatusBar = this.StatusBar;
      let CustomBar = this.CustomBar;
      let bgImage = this.bgImage;
      let style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      return style;
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: ''
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    }
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>
